import router from '@/router'
// import { asyncRoutes } from '@/router'
import store from '@/store'

// 路由前置守卫，每次跳转页面前经过
router.beforeEach(async(to, from, next) => {
  // 创建直接放性白名单
  // 🍑如果去往登录页/404，直接跳转(防止死循环)
  if (['/login', '404'].includes(to.path)) return next()
  if (store.state.user.token) {
    if (!store.state.user.userInfo.userId) {
      // 菜单权限实现-方式1不用vuex的模块
      // 目的,让你了解主要实现不走,并且把步骤放在一起,方便理解
      // // 2. 发请求获取用用户信息
      // await store.dispatch('user/getUserInfo')
      // // 3. 获取vuex当中用户信息的权限数据
      // const menus = store.state.user.userInfo.roles.menus
      // // 4. 通过菜单标识过滤动态组件
      // const filterRoutes = asyncRoutes.filter(item => menus.includes(item.children[0].name))
      // console.log(filterRoutes)
      // // 5. 通过路由的addRoutes添加过滤路由到路由当中
      // router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
      // // 6. 添加过滤路由到路由原配置中
      // router.options.routes.push(...filterRoutes)
      // // 7. 解决刷新页面404的问题
      // // 原因:(1)addRoutes添加路由配置不是立即生效,需要下一次跳转才生效
      // // (2)静态路由当中path为*的路由配置影像,把整一个配置放到最后面
      // return next(to.path)

      // 菜单权限实现,方式2,用vuex的模块
      // 4.发请求获取用户信息.并且得到菜单表示
      const { roles: { menus }} = await store.dispatch('user/getUserInfo')
      // 5. 调用vuex当中的过滤路由
      const filterRoutes = await store.dispatch('permission/filterRouter', menus)
      // 6.通过路由的addRoutes添加过滤路由到路由当中
      router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
      // 8. 解决刷新页面404的问题
      // 原因:(1)addRoutes添加路由配置不是立即生效,需要下一次跳转才生效
      // (2)静态路由当中path为*的路由配置影像,把整一个配置放到最后面
      return next(to.path)
    }
    next()
  } else {
    next('/login')
  }
})
